<template>
	<view class="circle-container">
		<view class="circle-search">
			<icon type="search" v-if="!inputStu" size="20" @click="handleFocus()"></icon>
			<view class="searchForm">
				<input type="text" v-if="inputStu" placeholder-class="placeholder-class" placeholder="请输入关键字，回车搜索" v-model="value"
				 confirm-type="search" @confirm="onSearch">
			</view>
			<view v-if="!inputStu" class="releasebtn fs_26" @click="$handleOpenUrl('/pages/circle/add')">发布</view>
		</view>
		<view class="tab-content">
			<view class="new-circle">
				<view class="new-circle-item" v-for="(item, index) in circleList" :key="item.id" @click="handleJumpurl(`/pages/circle/detail?id=${item.id}`)">
					<view class="top">
						<view class="left">
							<image class="avatar" :src="item.headimgurl || 'https://oss-shop.cciinet.com/files/MiniProgram/circle_avatar.png'"
							 alt="">
						</view>
						<view class="right">
							<view class="title">
								<span class="name fs_28 c_333 ellipsis">{{item.nickname}}</span>
								<span class="fs_20 c_999">{{item.formatCreateDate}}</span>
							</view>
							<view class="content c_666 fs_28">
								<p>{{handleShowText(item.content)}}</p>
							</view>

							<view v-if="item.fileType=='1'" class="imgs">
								<view v-for="(v, i) in item.fileUrl" :key="v">
									<img :src="v" alt="" @click.stop="viewPicture(v)">
								</view>
							</view>

							<view v-if="item.fileType=='2'" class="video_box">
								<view id="poster">
									<image :src="item.fileUrl+'?x-oss-process=video/snapshot,t_0,m_fast,f_png,ar_auto'" mode="heightFix">
										<i class="iconfont icon-iconset0481"></i>
								</view>
							</view>
						</view>
					</view>
					<view class="operation c_666">
						<p class="address">
							<i class="iconfont icon-dizhi1"></i>
							<span class="c_999 fs_26 ellipsis">{{item.province}} {{item.city}}</span>
						</p>
						<view class="yijiansanlian">
							<p class="view_count">
								<i class="iconfont icon-yanjing"></i>
								<span class="c_999 fs_26">浏览{{item.viewCount}}次</span>
							</p>
							<p>
								<i class="iconfont icon-tubiaozhizuo-"></i>
								<span class="c_999 fs_26" v-if="!item.discussCount">评论</span>
								<span class="c_999 fs_28" v-else>{{item.discussCount}}</span>
							</p>
							<p @click.stop="handlePraise(item,index)">
								<i class="iconfont icon-dianzan" :class="item.isCommend ? 'praise' : ''"></i>
								<span v-if="!item.commendCount" class="c_999 fs_26">点赞</span>
								<span v-else class="c_999 fs_28" :class="item.isCommend ? 'praise' : ''">{{item.commendCount}}</span>
							</p>
							<p @click.stop="handleDel(item.id)" v-if="item.userId==userId">
								<i class="iconfont icon-shanchu1"></i>
							</p>
						</view>
					</view>
				</view>
			</view>
		</view>
		<view class="loading-text">
			{{loadingType === 0 ? contentText.contentdown : (loadingType === 1 ? contentText.contentrefresh : contentText.contentnomore)}}
		</view>
		<view v-if="!platform">
			
		
			<!-- #ifdef !H5 -->
			<view class="circle_bf" v-if="!userId" @touchmove.stop="" @click="$handleOpenUrl('/pages/login/index')">
			<!-- #endif -->
			<!-- #ifdef H5 -->
			<view class="circle_bf circle_bf1" v-if="!userId" @touchmove.stop="" @click="$handleOpenUrl('/pages/login/index')">
			<!-- #endif -->
				<view class="con">
					查看全部
				</view>
			</view>
		</view>
		<div v-if="userId" class="release_btn" @click="$handleOpenUrl('/pages/circle/add')">
			<div class="inner">我要发布</div>
		</div>
	</view>
</template>
<script>
	import {
		getArticleList,
		getNewCircleList,
		addCommend,
		delCircle
	} from '@/api/circle/index.js'
	import { $handleStatistcs } from "@/utils/statistics.js"
	export default {
		data() {
			return {
				value: '',
				current: 1,
				size: 15,
				title: '',
				circleList: [],
				loading: false,
				finished: false,
				showBtn: true,
				timer: null,
				inputStu: false,
				loadingType: 0,
				contentText: {
					contentdown: "上拉显示更多",
					contentrefresh: "正在加载...",
					contentnomore: "没有更多数据了"
				},
				userId: "",
				isLoad: 1,
				platform:false,
			}
		},
		onLoad() {
			this.getCircleList()
			this.userId = uni.getStorageSync("userId")
		},
		onShow() {
			if (this.isLoad == 2) {
				this.current = 1
				this.list = []
				this.circleList = []
				this.getCircleList()
				this.isLoad = 1
			}
			this.platform = uni.getSystemInfoSync().platform == 'ios'
			this.userId = uni.getStorageSync("userId")
			$handleStatistcs()
		},
		onPageScroll() {
			this.inputStu = false
		},
		// 下拉刷新
		onPullDownRefresh() {
			this.current = 1
			this.list = []
			this.circleList = []
			this.getCircleList();
		},
		onReachBottom() {
			this.loadingType = 1
			this.getCircleList()
		},
		methods: {
			handleDel(id) {
				if (!uni.getStorageSync('userId')) {
					this.$handleOpenUrl("/pages/login/index")
					return
				}
				uni.showModal({
					content: '确认删除此条圈子吗',
					cancelText: '取消',
					confirmText: '确认',
					success: (res) => {
						if (res.confirm) {
							delCircle({
								circleId: id,
								openid: uni.getStorageSync("openid"),
								userId: uni.getStorageSync("userId")
							}).then(res => {
								if (res.code == 0) {
									uni.showToast({
										title: '删除成功'
									})
									this.current = 1
									this.circleList = []
									this.getCircleList()
								} else {
									uni.showToast({
										title: res.msg
									})
								}
							})
						} else if (res.cancel) {
							console.log('用户点击取消');
						}
					}
				})
			},
			handleJumpurl(url) {
				this.$handleOpenUrl(url,uni.getSystemInfoSync().platform == 'ios'?99:1)
			},
			handleShowText(txt) {
				if (txt.length > 100) {
					return txt.substr(0, 100) + '...查看全部'
				}
				return txt
			},
			async handlePraise(item, index) {
				if (!uni.getStorageSync('userId')) {
					this.$handleOpenUrl("/pages/login/index")
					return
				}
				let res = await addCommend({
					openid: uni.getStorageSync('openid'),
					status: item.isCommend ? 0 : 1,
					type: 1, // 1圈子 2评论
					typeId: item.id,
					userId: uni.getStorageSync('userId'),
				})
				if (res.code == 0) {
					if (item.isCommend) {
						this.circleList[index].isCommend = false
						this.circleList[index].commendCount--
					} else {
						this.circleList[index].isCommend = true
						this.circleList[index].commendCount++
					}
				} else {
					uni.showToast({
						title: res.msg,
						icon: 'none'
					})
				}
			},
			viewPicture(img) {
				var imgArr = [];
				imgArr.push(img);
				uni.previewImage({
					urls: imgArr,
					current: imgArr[0]
				});
			},
			async getCircleList() {
				let res = await getNewCircleList({
					content: this.title,
					current: this.current,
					pageSize: this.size,
					openid: uni.getStorageSync('openid'),
					userId: uni.getStorageSync('userId') || ''
				})
				if (res.code == 0) {
					res.data.content.map(v => {
						// v.topUpdateDate = v.topUpdateDate.replace(/-/g, "/")
						v.fileUrl = v.fileUrl ? v.fileUrl.split('|') : []
					})
					let stu = 1
					if (res.data.content.length == 0 || res.data.content.length < 10) {
						stu = 2
					}
					this.loadingType = stu
					this.current++
					this.circleList = [...this.circleList, ...res.data.content]
					uni.stopPullDownRefresh();
				} else {
					this.$toast(res.msg)
				}
			},
			formSubmit() {
				return false
			},
			onSearch(e) {
				this.title = this.value
				this.current = 1
				this.list = []
				this.circleList = []
				this.getCircleList()
			},

			handleFocus() {
				this.inputStu = true
			},
		},
	}
</script>

<style lang="scss" scoped>
	.circle-container {
		background-color: #F2F1F1;
		height: 100%;

		.circle_bf {
			width: 100%;
			height: 100%;
			background: linear-gradient(rgba(255, 255, 255, 0), rgba(255, 255, 255, 1));
			position: fixed;
			top: 0;
			left: 0;
			z-index: 999;

			.con {
				position: absolute;
				left: 50%;
				transform: translateX(-50%);
				color: #EA5520;
				bottom: 40upx;
			}
		}
		.circle_bf1{
			height: 92%;
		}
		.loading-text {
			width: 100%;
			text-align: center;
		}

		.circle-search {
			background-color: #fff;
			position: fixed;
			top: 0;
			left: 0;
			z-index: 999;
			height: 88upx;
			width: 100%;
			display: flex;
			justify-content: center;
			align-items: center;

			icon {
				position: absolute;
				left: 30upx;
			}

			.searchForm {
				width: 100%;
				margin: 0 50upx 0 30upx;

				/deep/.placeholder-class {
					font-size: 28upx;
					color: #999;
				}

				input {
					width: 100%;
					height: 54upx;
					border: 1upx solid rgba(238, 238, 238, 1);
					border-radius: 27upx;
					background-color: #F4F4F4;
					animation: mymove 1s;
					padding-left: 20upx;
					font-size: 28upx;
				}
			}

			@keyframes mymove {
				from {
					width: 0%;
				}

				to {
					width: 100%;
				}
			}

			.releasebtn {
				height: 54upx;
				width: 100upx;
				border: 2upx solid #EA5520;
				background-color: #EA5520;
				border-radius: 27upx;
				display: flex;
				justify-content: center;
				align-items: center;
				color: #fff;
				position: absolute;
				right: 20upx;
			}
		}

		.tab-content {
			padding: 88upx 0 0;
			background-color: #F2F1F1;

			.new-circle {
				.new-circle-item {
					border-radius: 8upx;
					background-color: #fff;
					margin: 10upx;

					.top {
						display: flex;

						.left {
							width: 120upx;

							image.avatar {
								width: 80upx;
								height: 80upx;
								margin: 20upx;
							}
						}

						.right {
							width: calc(100% - 120upx);
							margin-right: 20upx;

							.title {
								display: flex;
								justify-content: space-between;
								align-items: center;
								height: 65upx;

								.name {
									display: inline-block;
									width: 400upx;
									color: #00428e;
								}
							}

							.content {
								p {
									line-height: 1.5;
									word-break: break-all;
								}
							}

							.imgs {
								display: flex;
								justify-content: flex-start;
								margin-top: 15upx;

								view {
									img {
										width: 190upx;
										height: 190upx;
										margin-left: 5upx;
										object-fit: cover;
									}
								}
							}

							.video_box {
								// height: 330upx;
								// margin-top: 15upx;
								// border-radius: 8upx;
								height: 350upx;
								overflow: hidden;

								#poster {
									position: relative;
									float: left;
									height: 100%;

									image {
										// margin-right: 30upx;
										height: 100%;
										// max-width: 100%;
									}

									.iconfont {
										position: absolute;
										top: 135upx;
										left: calc(50% - 30upx);
										z-index: 666;
										font-size: 60upx;
										color: #fff;
									}
								}
							}
						}
					}

					.operation {
						display: flex;
						justify-content: space-between;
						align-items: center;
						height: 64upx;
						padding: 0 20upx;
						margin-top: 15upx;
						border-top: 1upx solid #EEEEEE;

						.address {
							width: 260upx;
							display: flex;
							align-items: center;

							.iconfont {
								font-size: 26upx;
							}
						}

						.yijiansanlian {
							display: flex;
							justify-content: flex-start;
							
							.view_count {
								width: 190upx!important;
							}
							
							p {
								width: 90upx;
								margin-left: 10upx;
								display: flex;
								align-items: center;

								.iconfont {
									font-size: 26upx;
									margin-right: 10upx;
								}

								.praise {
									color: #EA5520;
								}
							}
						}
					}
				}
			}

			.circle-item {
				display: flex;
				justify-content: space-between;
				align-items: center;
				background-color: #fff;
				margin: 10upx;
				height: 180upx;
				border-radius: 8upx;
				padding: 10upx;

				image {
					height: 120upx;
					width: 210upx;
					margin-right: 10upx;
					border-radius: 8upx;
				}

				.item-text {
					width: calc(100% - 220upx);

					.p1 {
						color: #343434;
					}

					.p2 {
						font-size: 20upx;
						color: #9A9A9A;

						image {
							width: 110upx;
							height: 41upx;
							vertical-align: bottom;
							margin-left: 10upx;
						}
					}

					.p3 {
						color: #9A9A9A;
						width: 100%;
						height: 70upx;
					}
				}
			}
		}
	}
	 .release_btn {
	        display: flex;
	        justify-content: center;
	        align-items: center;
	        z-index: 999;
	        position: fixed;
	        right: 0;
	        bottom: 220upx;
	        width: 239upx;
	        height: 148upx;
	        // background: #FFFFFF;
	        // box-shadow: 0upx 4upx 16upx 0upx rgba(0, 0, 0, 0.1);
	        // border-radius: 50%;
	        background: url("https://oss-shop.cciinet.com/files/MiniProgram/fabu_btn.png") no-repeat;
	        background-size: 100% 100%;
	        margin-bottom: env(safe-area-inset-bottom);
	        .inner {
	            // display: flex;
	            // justify-content: center;
	            // align-items: center;
	            // width: 80upx;
	            // height: 80upx;
	            // background: linear-gradient(-13deg, #218EED, #035ABE);
	            // border-radius: 50%;
	            font-size: 30upx;
	            font-weight: bold;
	            color: #fff;
	            margin-top: 12upx;
	        }
	    }
</style>
